<template>
  <el-affix :offset="0">
    <el-menu
        :default-active="defaultActive"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        :unique-opened="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
    >
      <!-- logo -->
      <el-image
          style="margin: 5px 0 5px 20px;"
          src="/src/assets/images/logo.png"
      />
      <el-menu-item index="/recruiterMain/recruiterHome">首页</el-menu-item>
      <el-menu-item index="/recruiterMain/recommendSeeker">推荐求职者</el-menu-item>
      <div class="flex-grow" style="flex-grow: 1;"/>
      <el-menu-item index="/recruiterMain/postJob"><el-icon><Edit /></el-icon>发布招聘信息</el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          {{ recruiter.hrNick }}
          <el-avatar
              style="width: 50px;height:50px;margin-left: 10px"
              :src="recruiter.headImage"
              alt="头像"
          />
        </template>
        <el-menu-item index="/recruiterMain/selfManage"><el-icon><UserFilled /></el-icon>个人中心</el-menu-item>
        <el-menu-item @click="toLeave"><el-image src="/src/assets/images/icons/leave.png" style="margin: 0 8px 15px 4px" />退出</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-affix>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue";
import { useRoute, useRouter } from 'vue-router';
import {ElMessageBox} from "element-plus";
import {recruiterApi} from "../../../api/app.js";

const recruiter = ref({
  hrNick: '',
  headImage: ''
});
// 处理头像 & 姓名修改
const handleChange = (event: CustomEvent) => {
  if(event.type === 'changeHrNick') {
    recruiter.value.hrNick = event.detail;
  } else if(event.type === 'changeHeadImage') {
    recruiter.value.headImage = event.detail;
  }
}
onMounted(() => {
  defaultActive.value = useRoute().path;
  recruiter.value.hrNick = JSON.parse(localStorage.getItem('recruiter')).hrNick;
  recruiter.value.headImage = JSON.parse(localStorage.getItem('recruiter')).headImage;
  // 监听页面更新
  const handler = (event: CustomEvent) => {
    handleChange(event);
  };
  window.addEventListener('changeHrNick', handler);
  window.addEventListener('changeHeadImage', handler);
  return () => {
    window.removeEventListener('changeHrNick', handler);
    window.removeEventListener('changeHeadImage', handler);
  }
})

const defaultActive = ref(); //默认导航
const route = useRoute();
// 改变顶部导航
const handleSelect = (key) => {
  defaultActive.value = key
  console.log(defaultActive.value)
}

const router = useRouter();
const zeroPad = (num, places) => {
  const zero = places - num.toString().length + 1;
  return Array(+(zero > 0 && zero)).join("0") + num;
}
// 格式化时间
const formatTime = (date) => {
  const year = date.getFullYear();
  const month = zeroPad(date.getMonth() + 1, 2);
  const day = zeroPad(date.getDate(), 2);
  const hours = zeroPad(date.getHours(), 2);
  const minutes = zeroPad(date.getMinutes(), 2);
  const seconds = zeroPad(date.getSeconds(), 2);
  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
}
// 退出系统
const toLeave = () => {
  ElMessageBox.confirm(
      '您确定要离开嘛？',
      '危险操作',
      { confirmButtonText:'确定',cancelButtonText:'取消',type:'warning', }
  ).then(() => {
    // 确认退出
    // 1.修改上次登陆时间
    let recruiter = JSON.parse(localStorage.getItem('recruiter'));
    // 获取当前时间的 Date 对象
    const now = new Date();
    const formattedDate = formatTime(now);
    recruiter.lastOnline = formattedDate;
    recruiterApi.changeRecruiterById({
      id: recruiter.id,
      password: recruiter.password,
      phone: recruiter.phone,
      lastOnline: recruiter.lastOnline
    }).then(response => {
      console.log(response);
    }).catch(error => {
      console.log(error);
    })
    // 2.去掉全局变量并跳转到登陆页面
    localStorage.removeItem('recruiter');
    router.replace({ name: 'Login' });
  })
}
</script>

<style scoped>

</style>
